<template>
    <div class="page-container">
        <div class="page-content">
            <el-row :gutter="20">
                <el-col :span="16">
                    <div class="content-card">
                        <div class="card-header">
                            <h3>个人资料</h3>
                        </div>
                        <div class="card-body">
                            <el-form
                                :model="profileForm"
                                :rules="rules"
                                ref="profileFormRef"
                                label-width="100px"
                                class="form-container"
                            >
                                <el-form-item label="用户名" prop="username">
                                    <el-input v-model="profileForm.username" />
                                </el-form-item>
                                
                                <el-form-item label="邮箱" prop="email">
                                    <el-input v-model="profileForm.email" />
                                </el-form-item>
                                
                                <el-form-item label="手机号码" prop="phone">
                                    <el-input v-model="profileForm.phone" />
                                </el-form-item>
                                
                                <el-form-item label="组织机构" prop="organization">
                                    <el-input v-model="profileForm.organization" />
                                </el-form-item>
                                
                                <div class="form-footer">
                                    <el-button type="primary" @click="handleUpdateProfile" :loading="loading">
                                        保存修改
                                    </el-button>
                                </div>
                            </el-form>
                        </div>
                    </div>
                </el-col>
                
                <el-col :span="8">
                    <div class="content-card">
                        <div class="card-header">
                            <h3>偏好设置</h3>
                        </div>
                        <div class="card-body">
                            <el-form :model="preferencesForm" label-width="100px">
                                <el-form-item label="数据源">
                                    <el-select
                                        v-model="preferencesForm.data_sources"
                                        multiple
                                        placeholder="选择数据源"
                                    >
                                        <el-option label="微博" value="weibo" />
                                        <el-option label="Twitter" value="twitter" />
                                        <el-option label="Facebook" value="facebook" />
                                    </el-select>
                                </el-form-item>
                                
                                <el-form-item label="通知设置">
                                    <el-switch
                                        v-model="preferencesForm.notification_settings.email_notifications"
                                        active-text="邮件通知"
                                    />
                                </el-form-item>
                                
                                <div class="form-footer">
                                    <el-button type="primary" @click="handleUpdatePreferences" :loading="preferencesLoading">
                                        保存设置
                                    </el-button>
                                </div>
                            </el-form>
                        </div>
                    </div>
                    
                    <div class="content-card">
                        <div class="card-header">
                            <h3>账号信息</h3>
                        </div>
                        <div class="card-body">
                            <div class="account-info">
                                <p><strong>账号状态：</strong> 
                                    <el-tag :type="user?.is_premium ? 'success' : 'info'">
                                        {{ user?.is_premium ? '高级会员' : '普通会员' }}
                                    </el-tag>
                                </p>
                                <p><strong>注册时间：</strong> {{ formatDate(user?.created_at) }}</p>
                                <p><strong>最后更新：</strong> {{ formatDate(user?.updated_at) }}</p>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

const store = useStore()
const profileFormRef = ref(null)
const loading = ref(false)
const preferencesLoading = ref(false)

const user = computed(() => store.getters.currentUser)
const userPreferences = computed(() => store.getters.userPreferences)

const profileForm = reactive({
    username: '',
    email: '',
    phone: '',
    organization: ''
})

const preferencesForm = reactive({
    data_sources: [],
    notification_settings: {
        email_notifications: false
    }
})

const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, message: '用户名长度至少为3个字符', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
    ],
    phone: [
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
    ]
}

onMounted(async () => {
    if (user.value) {
        Object.assign(profileForm, {
            username: user.value.username,
            email: user.value.email,
            phone: user.value.phone,
            organization: user.value.organization
        })
    }
    
    if (userPreferences.value) {
        Object.assign(preferencesForm, {
            data_sources: userPreferences.value.data_sources || [],
            notification_settings: userPreferences.value.notification_settings || {
                email_notifications: false
            }
        })
    }
})

const handleUpdateProfile = async () => {
    if (!profileFormRef.value) return
    
    try {
        await profileFormRef.value.validate()
        loading.value = true
        await store.dispatch('updateProfile', profileForm)
        ElMessage.success('个人资料更新成功')
    } catch (error) {
        console.error('更新失败:', error)
        ElMessage.error('更新失败，请重试')
    } finally {
        loading.value = false
    }
}

const handleUpdatePreferences = async () => {
    try {
        preferencesLoading.value = true
        await store.dispatch('updatePreferences', preferencesForm)
        ElMessage.success('偏好设置更新成功')
    } catch (error) {
        console.error('更新失败:', error)
        ElMessage.error('更新失败，请重试')
    } finally {
        preferencesLoading.value = false
    }
}

const formatDate = (date) => {
    if (!date) return '未知'
    return new Date(date).toLocaleString()
}
</script>

<style scoped>
.account-info {
    line-height: 2;
}

.account-info p {
    margin: 10px 0;
}

.el-tag {
    margin-left: 5px;
}
</style> 